<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="http://localhost:8888/css/bootstrap.css">
    <link rel="stylesheet" href="http://localhost:8888/css/shopcart.css">
    <script src="http://localhost:8888/js/jquery-3.5.1.js"></script>
    <script src="http://localhost:8888/js/bootstrap.js"></script>
    <script src="http://localhost:8888/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        $(function () {
            $('.modal').modal({
                backdrop: "static",
                keyboard : false,
                show : false
            });
            // all = $('#all');
            // let pros =  $('input[name="pro"]');
            // let total = pros.length; // 获取到购物车的总数量
            // $('#add-poetry').click(function () {
            //     $("#AddPoetry").modal('show');
            // });
            let total = $(".td-list").length;
            //1. 实现全选全消功能
            $('#all').click(function () {
                // 全选/取消
                // pros.prop("checked",this.checked);
                $(".td-list").prop("checked", this.checked)
                calTotalPrice();
            });
            //4. 全选优化
            // $(".td-list").click(function () {
            //     alert(11)
            //     let chosePro = $('input[name="pro"]:checked');
            //     alert(chosePro);
            //     $('#all').prop("checked",chosePro.length == total);
            //     // // 更新总价
            //     // calTotalPrice();
            // })
            //4. 全选优化
            $(".td-list").click(function () {
                let chosePro = $('input[name="pro"]:checked');
                $('#all').prop("checked",chosePro.length == 5);
                // 更新总价
                calTotalPrice();
            })
            // $('#reverse_election').click(function () {
            //     $(".td-list:checkbox").each(function () {
            //         //遍历所有复选框，然后取值进行 !非操作
            //         $(this).prop("checked", !$(this).prop("checked"));
            //     })
            // })

        })
        function calTotalPrice() {
            let proList = $('input[name="pro"]:checked'); //获取到被选中的商品
            let totalPrice = 0;
            for(let pro of proList){
                let subTotal = $(pro).parent().next().next().next().next().next().next().children("span").text();
                totalPrice += parseFloat(subTotal);
            }
            // 更新总价
            $('#totalPrice').text(totalPrice);

        }
    </script>
</head>
<body>

<!--购物车-->
<div class="shopcart" id="shopcart">
    <h2 class="text-center">我的购物车</h2>
    <div class="col-md-offset-10">
        <button type="button" class="btn btn-info" id="add-shop" @click="add()">添加商品</button>
    </div>
    <!--<div class="title">我的购物车</div>-->
    <div class="allLabel">
        全部商品
        <span id="s_total"></span>
    </div>
    <!--表格-->
    <div class="box">
        <table>
            <tbody>
            <tr style="height: 45px; background:#e0e0e0;">
                <td colspan="2" width="130px" style="padding-left:8px">
                    <input type="checkbox" id="all">
                    <label for="all">全选</label>
                </td>
                <td colspan="2" width="460px">
                    商品
                </td>
                <td width="90px" align="center">单价</td>
                <td width="100px" align="center">数量</td>
                <td width="120px" align="center">小计</td>
                <td width="100px" align="center">操作</td>
            </tr>
            <tr class="item" v-for="sh in shopList" :key="sh.id">
                <td class="check">
                    <input class="td-list" name="pro" type="checkbox" :value="sh.id">
                </td>
                <td class="pimg">
                    <img :src="sh.pimage"/>
                </td>
                <td class="info">
                    {{sh.pname}}
                    {{sh.description}}
                </td>
                <td class="size">
                    {{sh.pcolor}}
                    <p>{{sh.pver}}</p>
                </td>
                <td class="price">
                    ¥<span>{{sh.price}}</span>
                </td>
                <td class="num">
                    {{sh.num}}
                </td>
                <td class="subtotal">
                    ¥<span>{{sh.subtotal}}</span>
                </td>
                <td class="del">
                    <span @click="remove(sh.id)">&times;</span>
                    <span @click="edit(sh)" style="color: #2aabd2">修改</span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <!--结算小计-->
    <div class="footer navbar-fixed-bottom">
        <div class="opt">
            <input type="checkbox" id="delAll">
            <label for="delAll">全选</label>
            <a href="">删除选中的商品</a>
            <a href="">移入关注</a>
            <a href="">清理购物车</a>
        </div>
        <div class="cal">
            <span>已选择<span class="num" id="chooseNum">0</span>件商品</span>
            <span>总价 <span class="totalPrice" id="totalPrice">¥0.00</span></span>
            <button type="button" class="btn-cal">结 算</button>
        </div>
    </div>
    <!--商品添加的模态框-->
    <div class="modal" id="AddProduct">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background:linear-gradient(to bottom,#3f6eaa,#157dc5);" >
                    <button type="button" class="close" data-dismiss="modal" >&times;</button>
                    <h3 class="text-center" style="color: #fff">商 品 添 加</h3>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="addproductForm">
                        <div class="form-group">
                            <label for="add_title" class="col-md-2 control-label">商品名称</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="add_title" v-model="shopcart.pname" required >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="add_author" class="col-md-2 control-label">商品描述</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="add_author" v-model="shopcart.description"required>
                            </div>
                        </div>
                        <!--<div class="form-group">-->
                            <!--<label for="add_img" class="col-md-2 control-label">商品图片</label>-->
                            <!--<div class="col-md-10">-->
                                <!--<input type="file" class="form-control" id="add_img" @change="preview($event)" required>-->
                            <!--</div>-->
                        <!--</div>-->
                        <div class="form-group">
                            <label for="add_kind" class="col-md-2 control-label">商品类别</label>
                            <div class="col-md-5">
                                <select name="state" id="add_kind" class="form-control" v-model="shopcart.pver" required>
                                    <option value="8+512G">8+512G</option>
                                    <option value="6+256G">6+256G</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="add_color" class="col-md-2 control-label">商品颜色</label>
                            <div class="col-md-5">
                                <select name="state" id="add_color" class="form-control" v-model="shopcart.pcolor" required>
                                    <option value="深灰">深灰</option>
                                    <option value="浅蓝">浅蓝</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="add_intro" class="col-md-2 control-label">商品价格</label>
                            <div class="col-md-5">
                                <input type="text" class="form-control" id="add_intro" v-model="shopcart.price" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="add_content" class="col-md-2 control-label">商品数量</label>
                            <div class="col-md-5">
                                <input type="number" class="form-control" id="add_content" v-model="shopcart.num" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-5 col-md-offset-2">
                                <button type="button" class="btn btn-block btn-danger" @click="addShop()">添 加</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--商品修改的模态框-->
    <div class="modal" id="updateshop">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background:linear-gradient(to bottom,#3f6eaa,#157dc5);" >
                    <button type="button" class="close" data-dismiss="modal" >&times;</button>
                    <h3 class="text-center" style="color: #fff">商 品 修 改</h3>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" >
                        <div class="form-group">
                            <label for="row_title" class="col-md-2 control-label">商品名称</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="row_title" v-model="rowshop.pname" required >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="row_author" class="col-md-2 control-label">商品描述</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="row_author" v-model="rowshop.description"required>
                            </div>
                        </div>
                        <!--<div class="form-group">-->
                        <!--<label for="row_img" class="col-md-2 control-label">商品图片</label>-->
                        <!--<div class="col-md-10">-->
                        <!--<input type="file" class="form-control" id="row_img" @change="preview($event)" required>-->
                        <!--</div>-->
                        <!--</div>-->
                        <div class="form-group">
                            <label for="row_kind" class="col-md-2 control-label">商品类别</label>
                            <div class="col-md-5">
                                <select name="state" id="row_kind" class="form-control" v-model="rowshop.pver" required>
                                    <option value="8+512G">8+512G</option>
                                    <option value="6+256G">6+256G</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="row_color" class="col-md-2 control-label">商品颜色</label>
                            <div class="col-md-5">
                                <select name="state" id="row_color" class="form-control" v-model="rowshop.pcolor" required>
                                    <option value="深灰">深灰</option>
                                    <option value="浅蓝">浅蓝</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="row_intro" class="col-md-2 control-label">商品价格</label>
                            <div class="col-md-5">
                                <input type="text" class="form-control" id="row_intro" v-model="rowshop.price" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="row_content" class="col-md-2 control-label">商品数量</label>
                            <div class="col-md-5">
                                <input type="number" class="form-control" id="row_content" v-model="rowshop.num" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-5 col-md-offset-2">
                                <button type="button" class="btn btn-block btn-danger" @click="updateshop()">修 改</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el : "#shopcart",
        data:{
            shopList : [],  // 一页商品集合数据
            file:null,
            shopcart:{pname:"",description:"",pcolor:"",pver:"",price:"",num:""},
            rowshop:{id:"",pname:"",description:"",pcolor:"",pver:"",price:"",num:""}
        },
        methods:{
            onePage : function () {
                axios({
                    url : "/shop/listShop",
                    method : "get",
                    params :'',
                }).then((value) => {
                    let data = value.data; // 从axios返回值中获取响应正文(data ： 就是Mybatis分页插件查询的PageInfo)
                    this.shopList = data; // 绑定用户集合数据
                    console.log(this.shopList);
                })
            },
            add:function(){
                // Object.keys(this.shopcart).forEach(key => (this.peotry[key] = ''));
                $("#AddProduct").modal('show');
            },
            // preview : function (evt) {
            //     // 获取到选中的文件 // 图片预览功能
            //     let file =  evt.target.files[0];
            //     // 2.4 保存需要上传的文件
            //     this.shopList.pimage= file;
            // },  // 图片预览
            addShop:function () {
                // console.log(this.shopcart)
                axios.post("/shop/addShop",this.shopcart).then(value => {
                    let resp = value.data;
                    if(resp == "ok"){
                        alert("添加购物车成功");
                        $('#AddProduct').modal('hide');
                        this.onePage();
                    }else{
                        alert("添加购物车失败");
                    }
                })
            },
            remove:function (id) {
                let flag = confirm("您忍心要删除吗?");
                if(flag){
                    // 发送异步的删除请求
                    axios.get("/shop/removeById/"+id,).then((value) => {
                        let resp = value.data;
                        if(resp == "ok"){
                            alert("恭喜，删除成功");
                            this.onePage();// 数据回显（再次查询下当前页面的数据）
                        }else{
                            alert("删除失败");
                        }
                    })
                }
            },
            //数据回显
            edit:function (sh) {
                // rowshop:{id:"",pname:"",description:"",pcolor:"",pver:"",price:"",num:""}
                this.rowshop.id=sh.id;
                this.rowshop.pname=sh.pname;
                this.rowshop.description=sh.description;
                this.rowshop.pcolor=sh.pcolor;
                this.rowshop.pver=sh.pver;
                this.rowshop.price=sh.price;
                this.rowshop.num=sh.num;
                $("#updateshop").modal('show');
            },
            updateshop:function () {
                axios.post("/shop/updateShop",this.rowshop).then(value => {
                    let resp = value.data;
                    if(resp == "ok"){
                        alert("修改商品成功");
                        $('#updateshop').modal('hide');
                        this.onePage();
                    }else{
                        alert("修改商品失败");
                    }
                })
            },
            // preview : function (evt) {
            //     // 获取到选中的文件 // 图片预览功能
            //     let file =  evt.target.files[0];
            //
            //     // 2.4 保存需要上传的文件
            //     this.file= file;
            //     console.log(file);
            // },
        },
        mounted(){ // 挂载成功后执行（数据准备阶段 ：更新Data -> 更新虚拟DOM -> render）
            this.onePage();
        }
    })
</script>

</body>
</html>